<template>
<!--礼卡支付记录界面-->
<el-dialog :title="$t('collectmoney.dialog.consumeRecords.title')" :visible.sync="pageVisible" :close-on-click-modal="false" width="100" @close="closeDialog" append-to-body>
    <el-table :data="payRecords" height="250" border style="width: 100%">
        <el-table-column prop="payMoney" :label="$t('collectmoney.dialog.consumeRecords.table.payTimeColumnName')" min-width="100">
        </el-table-column>
        <el-table-column prop="addTime" :label="$t('collectmoney.dialog.consumeRecords.table.payMoneyColumnName')" min-width="100">
        </el-table-column>
    </el-table>
</el-dialog>
</template>

<script>
import {
    getGiftCardPayRecords
} from '../api/api';
export default {
    data() {
        return {
            giftCardId: "",
            pageSize: 100,
            currentPage: 1,
            pageVisible: false,
            listLoading: false,
            payRecords: []
        }
    },
    mounted() {},
    methods: {
        showPage(para) {
            this.giftCardId = para;
            this.handleQueryCardPayRecords();
            this.pageVisible = true;
        },
        handleQueryCardPayRecords() {
            this.listLoading = true;
            let para = {
                pageSize: this.pageSize,
                pageNum: this.currentPage,
                cardId: this.giftCardId
            };
            getGiftCardPayRecords(para).then((res) => {
                this.listLoading = false;
                this.payRecords = res.data.list;
            });
        },
        closeDialog() {
            this.giftCardId = "";
            this.payRecords = [];
        }
    }
}
</script>

<style scoped>
</style>
